<template>
  <div class="wrap">
    <!--查询表单-->
    <el-form label-position="left" size="mini" :inline="true" :model="queryForm" label-width='90px' class="query-form">
        <el-form-item label="下单人">
            <el-input v-model="queryForm.createUserCname" clearable placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getData(1)">查询</el-button>
            <el-button type="primary" @click="clearQuery">清空</el-button>
            <el-button type="primary" @click="dialogAddVisible = true">新增</el-button>
            <el-button type="primary" @click="export2Excel">导出</el-button>
        </el-form-item>
        <el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;<a class="text-base" @click='query_show = !query_show; '>更多查询条件<i :class="'iconfont icon-'+query_show"></i></a>
        </el-form-item>
        <div v-show="query_show">
            <div class="input-box">
                <el-form-item label="咨询类型">
                    <el-select v-model="queryForm.zxfl" clearable placeholder="请选择">
                      <el-option v-for="item in config.zxList" :key="item" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域">
                    <el-select v-model="queryForm.qy" clearable placeholder="请选择">
                      <el-option v-for="item in config.qyList" :key="item" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="下单时间">
                    <el-date-picker
                        v-model="queryForm.createTime"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </el-form-item>
            </div>
        </div>
    </el-form>

    <!--客户表格数据展示-->
    <el-table class="table" ref="table" :data="tableData" border style="width: 100%;" @sort-change="sortChange" :header-cell-style="{padding: 0,height: '34px'}"
      >
      <el-table-column prop="khxm" label="客户姓名" sortable="custom" :show-overflow-tooltip="true">
        <!-- <template slot-scope="scope">
          <router-link class="text-base" :to="'./client_detail?id=' + scope.row.id">{{scope.row.name}}</router-link>
        </template> -->
      </el-table-column>
      <el-table-column prop="khhm" sortable="custom" label="客户号码"></el-table-column>
      <el-table-column prop="zxfl" sortable label="咨询分类"></el-table-column>
      <el-table-column prop="zxsj" sortable="custom" width="150px" label="咨询时间"></el-table-column>
      <el-table-column prop="createUserCname" sortable="custom" label="记录人"></el-table-column>
      <el-table-column prop="createTime" sortable="custom" width="150px" label="记录时间"></el-table-column>
      <el-table-column prop="zxnr" sortable="custom" label="咨询内容" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="qy" sortable="custom" label="区域"></el-table-column>
      <el-table-column prop="wthf" sortable="custom" label="问题回复" min-width="90" :show-overflow-tooltip="true"></el-table-column>
    </el-table>

    <!--客户表格数据分页-->
    <el-pagination v-if="count" background layout="total,prev, pager, next"
                   :page-size="pageSize"
                   @current-change="getData"
                   :current-page="currentPage"
                   :total="count" style="float: right;margin-bottom: 20px;">
    </el-pagination>

    <!--新增咨询单-->
    <el-dialog title="新增咨询单" width="900px" @open="openAdd" @close="closeAdd" class="dialogAdd"
               :visible.sync="dialogAddVisible" :close-on-click-modal='false' :modal-append-to-body='false' :modal="false">
      <el-form ref="addForm" style="margin-right: 20px;" :inline="true" :model="addForm" :rules="addFormRules" label-position="right" label-width="100px" size="mini">
        <el-form-item label="客户账号">
          <el-input v-model="khzh" clearable placeholder="" style="margin-right: 7px;">
          </el-input><el-button type="primary" size="mini" @click="getKhzl">查询</el-button>
        </el-form-item>
        <el-form-item label="客户账号" prop="khzh">
          <el-input v-model="addForm.khzh"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="khxm">
          <el-input v-model="addForm.khxm"></el-input>
        </el-form-item>
        <el-form-item label="客户号码" prop="khhm">
          <el-input v-model="addForm.khhm"></el-input>
        </el-form-item>
        <el-form-item label="客户地址" prop="khdz">
          <el-input v-model="addForm.khdz"></el-input>
        </el-form-item>
        <el-form-item label="咨询分类" prop="zxfl">
          <el-select v-model="addForm.zxfl" clearable>
            <el-option
              v-for="value in config.zxList"
              :key="value"
              :label="value"
              :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区域" prop="qy">
          <el-select v-model="addForm.qy" clearable>
            <el-option
              v-for="value in config.qyList"
              :key="value"
              :label="value"
              :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="咨询时间" prop="zxsk">
          <el-date-picker v-model="addForm.zxsj" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
            type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="咨询内容" prop="zxnr">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入咨询内容" resize="none" v-model="addForm.zxnr"></el-input>
        </el-form-item>
        <el-form-item label="问题回复" prop="wthf">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入问题回复" resize="none" v-model="addForm.wthf"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="add" size="mini">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'InquiryForm',
  data () {
    return {
      queryForm: {},    //  查询条件
      prop: 'createTime', //  排序属性
      order: -1,    //  排序 升序、降序
      tableData: [],    //  当前页数据
      query_show: false,          //  是否显示更多查询
      count: '',      //  总数据条数
      currentPage: 1,//默认开始页面
      pageSize: 20,//每页的数据条数
    /************************新增咨询单********************* */
      addForm: {
        khzh: '',
        khxm: '',
        khhm: '',
        khdz: '',
        zxfl: '',
        qy: '',
        zxsj: '',
      },                //  新增表单 (选择框字段需要先定义)
      khzh: '',         //  新增时搜索
      addFormRules:{
          khxm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          khhm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          khdz: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          zxfl: [{ required: true, validator: this.isNull, trigger: 'change' }],
      },//新增校验规则
      dialogAddVisible: false,    //  新增模态框
    }
  },
  mounted(){
    this.getData(1)
  },

  methods: {
    getData(val){
      this.currentPage = val
      let params = {}
      let queryForm = this.deepClone(this.queryForm)
      params.currentPage = val
      params.pageSize = this.pageSize
      params.queryForm = queryForm
      params.prop = this.prop
      params.order = this.order
      this.$post("/api/ZxdController/getList",params, (data) => {
        this.tableData = data.list;
        this.count = data.count;
      })
    },
    //  清空查询
    clearQuery(){
        this.queryForm = {}
        this.getData(1)
    },
    // 排序
    sortChange(obj){
      this.prop = obj.prop || "createTime"
      this.order = obj.order == 'ascending' ? 1 : -1
      this.getData(1)
    },

  /***********************导出******************* */
    formatJson(filterVal, jsonData) {
　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　},
    export2Excel() {
      let params = {}
      let queryForm = this.deepClone(this.queryForm)
      params.currentPage = 1
      params.queryForm = queryForm
      params.prop = this.prop
      params.order = this.order
      this.$post("/api/ZxdController/getList",params, (data) => {
        let tableData = data.list;
        require.ensure([], () => {
  　　　　const { export_json_to_excel } = require('../vendor/Export2Excel');
  　　　　const tHeader = this.config.zxdHeader;
  　　　　const filterVal = this.config.zxdFilterVal;
  　　　　const data = this.formatJson(filterVal, tableData);
  　　　　export_json_to_excel(tHeader, data, '咨询单');
  　　　})
      })
　  },
  /******************新增***************** */
    //  获取客户资料
    getKhzl(){
      this.$post("/api/KhzlController/getKhzl", {id: this.khzh}, (data) => {
        if(data.khzl){
          console.log(data.khzl)
          this.addForm.khzh = data.khzl.khzh
          this.addForm.khxm = data.khzl.khxm
          this.addForm.khhm = data.khzl.khhm
          this.addForm.khdz = data.khzl.khdz
          console.log(this.addForm)
        }else{
          this.$message.error("当前客户不存在")
        }
      })
    },
    // 打开新增模态框
    openAdd(){
      this.addForm.zxsj = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    },
    // 关闭新增模态框
    closeAdd(){
      this.$refs.addForm.resetFields()
      this.khzh = ''
    },
    // 确定新增
    add(){
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$post("/api/ZxdController/addOne", this.addForm, (data) => {
            this.$message.success("添加成功！")
            this.dialogAddVisible = false
            this.getData(1)
          })
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
  .wrap{
    .el-form-item{
      // margin-bottom: 10px;
    }
  }
  .dialogAdd {
    .el-input, .el-cascader, .el-select, .el-textarea {
      width: 300px;
    }
  }
</style>

